<template>
  <div>
    <h1>计算属性</h1>
    <table border="1" width="500">
      <tr>
        <th>学科</th>
        <th>分数</th>
      </tr>
      <tr v-for="(item, index) in stu" :key="index">
        <td>{{ item.title }}</td>
        <td>
          <input type="text" v-model="item.num" />
        </td>
      </tr>
      <tr>
        <td>总分</td>
        <td>{{num}}</td>
      </tr>
      <tr>
        <td>平均分</td>
        <td>{{ avg }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  // 定义变量的地方
  data() {
    return {
      stu: [
        {
          title: "语文",
          num: 0,
        },
        {
          title: "数学",
          num: 0,
        },
        {
          title: "英语",
          num: 0,
        },
      ],
    };
  },
  // 存放函数的地方
  methods: {},
  // 存放的函数必须有return,并且不能放异步函数。计算类的函数放到里面
  computed: {
    num() {
      let s = null;
      for (let i = 0; i < this.stu.length; i++) {
        s += Number(this.stu[i].num);
      }
      return s
    },
    avg(){
      let s = null;
      for (let i = 0; i < this.stu.length; i++) {
        s += Number(this.stu[i].num);
      }
      return (s/this.stu.length).toFixed(2)
    }
  },
};
</script>